<template>
  <chart-card :title="'运营趋势'" :extraType="'drop'" @changeDate="changeDate">
    <div class="legend-contain">
      <div>
        <img class="legend-one" src="@/assets/img/home/lastMile.png" />
        上周每日总里程(km)
      </div>
      <div>
        <img class="legend-two" src="@/assets/img/home/currentMile.png" />
        本周每日总里程(km)
      </div>
      <div>
        <img class="legend-three" src="@/assets/img/home/rate.png" />
        每日总运营率
      </div>
    </div>
    <Charts
      :chartData="chartData"
      :chartType="'operationTrend'"
      class="echartsMap"
    />
  </chart-card>
</template>

<script>
import Charts from "../charts/Charts";
import { ChartCard } from "./components";
import { getOperateTrend } from "@/services/home";

export default {
  name: "OpreateCard",
  data() {
    return {
      chartData: {
        mile: [
          {
            value: 20,
            label: "4月30日"
          },
          {
            value: 22,
            label: "5月1日"
          },
          {
            value: 12,
            label: "5月2日"
          },
          {
            value: 32,
            label: "5月3日"
          },
          {
            value: 23,
            label: "5月4日"
          },
          {
            value: 10,
            label: "5月5日"
          },
          {
            value: 24,
            label: "5月6日"
          },
          {
            value: 12,
            label: "5月7日"
          },
          {
            value: 25,
            label: "5月8日"
          },
          {
            value: 20,
            label: "5月9日"
          },
          {
            value: 28,
            label: "5月10日"
          },
          {
            value: 21,
            label: "5月11日"
          }
        ],
        rate: [
          {
            value: 18,
            label: "4月30日"
          },
          {
            value: 28,
            label: "5月11日"
          },
          {
            value: 23,
            label: "5月2日"
          },
          {
            value: 25,
            label: "5月3日"
          },
          {
            value: 26,
            label: "5月4日"
          },
          {
            value: 10,
            label: "5月5日"
          },
          {
            value: 25,
            label: "5月6日"
          },
          {
            value: 20,
            label: "5月7日"
          },
          {
            value: 26,
            label: "5月8日"
          },
          {
            value: 20,
            label: "5月9日"
          },
          {
            value: 23,
            label: "5月10日"
          },
          {
            value: 21,
            label: "5月11日"
          }
        ]
      }
    };
  },
  mounted() {
    // this.getOperateTrend();
  },
  components: {
    Charts,
    ChartCard
  },
  props: {
    title: String,
    loading: Boolean,
    type: String
  },
  methods: {
    changeDate(val) {
      let params = {
        date: val
      };
      this.getOperateTrend(params);
    },
    async getOperateTrend() {
      const {
        data: { data, code }
      } = await getOperateTrend();
      if (code === 200) {
        this.chartData = data;
      }
    }
  }
};
</script>

<style scoped lang="less">
.legend-contain {
  font-size: 12px;
  text-align: center;
  margin-top: 10px;
  & > div {
    display: inline-block;
    margin-right: 20px;
  }

  span {
    width: 20px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
  }

  .legend-one,
  .legend-two {
    width: 16px;
    height: 16px;
    vertical-align: bottom;
  }

  .legend-three {
    width: 20px;
    height: 14px;
    vertical-align: sub;
  }
}

.echartsMap {
  width: 90%;
  height: 320px;
}
</style>
